/*
  表格使用示例
  1. #header-[prop] 使用表头插槽
  2. #[prop] 使用表格插槽
  <eCustomTable title="Demo" :table-data="tableData" :table-header="tableHeader">
      <template #header-operation="{ column }">
        <span style="color: red">{{ column.label }} example </span>
      </template>
      <template #operation="{ row, index }">
        <el-button type="primary" @click="handleEdit(row, index)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(row, index)">删除</el-button>
      </template>
    </eCustomTable>
*/
import { FilterConfig } from '../../eAdvancedFilter'

// 表头列配置
export interface Column {
  id?: string // 列id
  type?: string // 列类型
  prop: string // 列属性
  label: string // 列标题
  sortable?: boolean // 是否可排序
  sortNo?: number // 排序号
  fixType?: string // 是否固定
  alignType?: string // 对齐方式
  headerAlign?: string // 表头对齐方式
  width?: string // 列宽
  minWidth?: string // 最小列宽
  show?: boolean // 是否显示
  showTooltip?: boolean // 是否显示show-overflow-tooltip
  filterConfig?: FilterConfig // 高级筛选项配置
  required?: boolean // 是否必填
  formatter?: Function // 格式化函数
  [key: string]: string | boolean | FilterConfig | number | undefined | Function
}

// 表格状态管理
export interface TableState {
  data: any[] // 表格数据
  columns: Column[] // 表头列原始配置
}

// 冻结方式选项
export const fixTypeOptions = [
  { label: '不固定', value: '' },
  { label: '左侧', value: 'left' },
  { label: '右侧', value: 'right' }
]

// 对齐方式选项
export const alignTypeOptions = [
  { label: '左对齐', value: 'left' },
  { label: '右对齐', value: 'right' },
  { label: '居中对齐', value: 'center' }
]
